<template>
  <div class="flex flex-col h-96">
    <div class="flex-shrink-0">
      <div class="cursor-pointer" @click="() => onChange('day')">日</div>
      <div class="cursor-pointer" @click="() => onChange('week')">周</div>
      <div class="cursor-pointer" @click="() => onChange('month')">月</div>
    </div>
    <div class="flex-1 h-0">
      <div ref="containerRef" class="h-full"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

let myChart;
export default {
  name: "OkrTreeDemoDemo01",

  data() {
    return {};
  },

  mounted() {
    myChart = echarts.init(this.$refs.containerRef);

    /** @type EChartsOption */
    const option = {
      xAxis: {
        type: "category",
        data: ["Category A", "Category B", "Category C"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [80, 120, 60], // 示例数据
          type: "bar",
          itemStyle: {
            color: function (params) {
              // params 是当前柱子的信息对象
              var value = params.value; // 当前柱子的数据值
              // 定义颜色区间
              // if (value < 50) {
              //   return "red"; // 低于50的颜色
              // } else if (value < 100) {
              //   return "green"; // 50至100之间的颜色
              // } else {
              //   return "blue"; // 高于等于100的颜色
              // }
              return {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "red", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "red", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "blue", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "blue", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              };
            },
          },
        },
      ],
    };

    myChart.setOption(option);
  },

  methods: {
    onChange(flag) {
      if (flag === "day") {
        myChart.setOption({
          xAxis: {
            // x 轴数据
            data: ["4月1日", "4月2日", "4月3日", "4月4日", "4月5日", "4月6日"],
          },
        });
      } else if (flag === "week") {
      } else if (flag === "month") {
        myChart.setOption({
          xAxis: {
            // x 轴数据
            data: ["1月", "2月", "3月", "4月", "5月", "6月"],
          },
        });
      }
    },
  },
};
</script>
